<script lang="ts" setup>
import routes from '@/router/routes'
import { useRoute } from 'vue-router'

defineOptions({
	name: 'rbac_role_RomeForm'
})

const route = useRoute()
const editForm = reactive({
	id: 0,
	name: '',
	note: '',
	status: Enums.common.statusDatas.ACTIVE[0],
	roleSelAdminers: {
		all: [],
		has: []
	},
	roleSelPermissions: {
		all: [],
		has: []
	}
})
const editFormRules = reactive({
	name: [{ required: true, message: t('角色管理.请输入角色名称!') }]
})
const defaultExpandAll = ref(false)
const permissionTree = ref([])
const editFormRef = ref()

const parentCheck = (node: any) => {
	if (node.parent) {
		if (!editForm.roleSelPermissions.has.includes(node.parent.key)) {
			editForm.roleSelPermissions.has.push(node.parent.key)
			parentCheck(node.parent)
		}
	}
}

const nodeCheck = (checkedKeys: any, e: any) => {
	console.log(checkedKeys, e)
	editForm.roleSelPermissions.has = checkedKeys.checked
	if (e.checked) {
		parentCheck(e.node)
	}
}

const getPermissionTree = (permissions: any) => {
	const nodes = []
	permissions.forEach((item: any) => {
		if (item.meta.permission) {
			editForm.roleSelPermissions.all.push(item.meta.permission)
			const node: any = {
				title: item.meta.title,
				key: item.meta.permission,
				permission: item.meta.permission
			}
			if (item.children) {
				node.children = getPermissionTree(item.children)
			}
			nodes.push(node)
		}
	})
	return nodes
}

const getRoleSelAdminers = () => {
	const formParams = {
		role_id: editForm.id
	}
	Api.post('/rbac/role/adminers', formParams, true).then((res: any) => {
		res.all.forEach((item: any) => {
			editForm.roleSelAdminers.all.push({
				label: item.account_name,
				value: item.id,
				disabled: item.status !== Enums.common.statusDatas.ACTIVE[0]
			})
		})
		res.has.forEach((id: any) => {
			editForm.roleSelAdminers.has.push(id)
		})
	})
}

const getRoleInfo = () => {
	editForm.id = Number(route.query.id) || 0
	if (editForm.id > 0) {
		const formParams = { id: editForm.id }
		Api.post('/rbac/role/info', formParams, true).then((res: any) => {
			editForm.name = res.info.name
			editForm.note = res.info.note
			editForm.status = res.info.status
			const rolePermissions = res.info.permissions || []
			rolePermissions.forEach((item: any) => {
				editForm.roleSelPermissions.has.push(item)
			})
		})
	}
	getRoleSelAdminers()
}

const doSave = () => {
	editFormRef.value
		.validate()
		.then((valid: any) => {
			const formParams = {
				id: editForm.id,
				name: valid.name,
				status: editForm.status,
				note: editForm.note || null,
				adminerIds: JSON.stringify(editForm.roleSelAdminers.has),
				permissions: JSON.stringify(editForm.roleSelPermissions)
			}
			Api.post('/rbac/role/add-or-edit', formParams, true).then((res: any) => {
				Api.notify(t('提示.保存成功'))
			})
		})
		.catch(() => {})
}

onMounted(() => {
	getRoleInfo()
	let permissions = []
	routes.forEach((item: any) => {
		if (item.path === '/') permissions = item.children
	})
	permissionTree.value = getPermissionTree(permissions)
})
</script>

<template>
	<IsGuest>
		<a-form
			ref="editFormRef"
			:label-col="{ span: 2 }"
			:wrapper-col="{ span: 16 }"
			:model="editForm"
			:rules="editFormRules">
			<a-form-item :label="t('角色管理.角色名')" name="name">
				<a-input v-model:value="editForm.name" :placeholder="t('角色管理.请输入角色名')" />
			</a-form-item>
			<a-form-item :label="t('角色管理.状态')" name="status">
				<a-radio-group v-model:value="editForm.status">
					<a-radio
						v-for="(item, key) in Enums.common.statusDatas"
						:key="key"
						:value="item[0]">
						{{ item[1] }}
					</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item :label="t('角色管理.备注')" name="note">
				<a-textarea v-model:value="editForm.note" :rows="4" />
			</a-form-item>
			<a-divider>{{ t('角色管理.管理员选择') }}</a-divider>
			<a-form-item :label="t('角色管理.管理员选择')">
				<a-checkbox-group
					v-model:value="editForm.roleSelAdminers.has"
					:options="editForm.roleSelAdminers.all"></a-checkbox-group>
			</a-form-item>
			<a-divider>{{ t('角色管理.权限分配') }}</a-divider>
			<a-form-item :label="t('角色管理.权限分配')">
				<a-tree
					v-if="permissionTree.length > 0"
					checkable
					:default-expand-all="true"
					:tree-data="permissionTree"
					:checkedKeys="editForm.roleSelPermissions.has"
					:check-strictly="true"
					:blockNode="true"
					@check="nodeCheck">
					test
				</a-tree>
			</a-form-item>
			<a-divider></a-divider>
			<a-form-item :wrapper-col="{ span: 16, offset: 2 }">
				<a-button type="primary" @click="doSave">{{ t('角色管理.保存') }}</a-button>
			</a-form-item>
		</a-form>
	</IsGuest>
</template>

<style lang="scss" scoped></style>
